<template>
  <a-layout style="height: 1161px;
  background-image: url('/images/背景.jpg');">
    <!-- Header -->
    <a-layout-header class="main-header">智悦银剪</a-layout-header>
    <a-layout-content>
      <!-- 待处理订单表 -->
      <a-card class="order-table pending-orders">
        <a-row>
          <a-col :span="12">
            <span class="table-title">待处理订单表</span>
          </a-col>
          <a-col :span="12" class="status">
            {{ pendingOrders.length ? '有订单待处理' : '无待处理订单' }}
          </a-col>
        </a-row>
        <a-table
            :dataSource="pendingOrders"
            :columns="columns"
            rowKey="key"
            :pagination="false"
            bordered
            style="font-size: 22px"
        />
        <div class="order-actions">
          <a-button @click="cancelOrder" style="font-size: 18px" danger>取消订单</a-button>
          <a-button type="primary" @click="completeOrder" style="font-size: 18px; background-color: #99BB99" >接受订单</a-button>
        </div>
      </a-card>

      <!-- 已处理订单表 -->
      <a-card class="order-table completed-orders">
        <a-row>
          <a-col :span="24">
            <span class="table-title">已处理订单表</span>
          </a-col>

        </a-row>
        <a-table
            style="font-size: 22px"
            :dataSource="completedOrders"
            :columns="completedColumns"
            rowKey="key"
            bordered
            :pagination="{
          position: ['bottomCenter'],
          pageSize: 5,
          showQuickJumper: true,
          showSizeChanger: true
        }"
        />
      </a-card>
    </a-layout-content>

    <!-- 底部栏 -->
    <a-layout-footer class="footer-bar">
      <a-space>
        <a href="#">剪发</a>
        <a href="#">个人</a>
      </a-space>
    </a-layout-footer>
  </a-layout>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const pendingOrders = ref([
      {
        key: Date.now(), // 或者使用其他唯一标识符
        hairstylistName: "金弥山",
        hairstylistPhone: "1234567899",
      },
      // 可以添加更多待处理订单，这里只添加了一个作为示例
    ]);
    // 待处理订单

    const completedOrders = ref([
    {
      key: Date.now() - 1000 * 60 * 60 * 24, // 确保这个key是唯一的，这里简单用当前时间减去一天作为示例
          date: "2024-11-20",
        hairstylistName: "张三",
        status: "已完成", // 已处理订单默认状态为已完成
    },
    // 可以添加更多已处理订单，这里只添加了一个作为示例
  ]);  // 已处理订单

    const columns = [
      { title: '客户姓名', dataIndex: 'hairstylistName', key: 'hairstylistName' },
      { title: '客户电话', dataIndex: 'hairstylistPhone', key: 'hairstylistPhone' },
    ];

    const completedColumns = [
      { title: '日期', dataIndex: 'date', key: 'date' },
      { title: '客户姓名', dataIndex: 'hairstylistName', key: 'hairstylistName' },
      { title: '状态', dataIndex: 'status', key: 'status' },
    ];

    // 发起订单
    const createOrder = () => {
      if (1) {  // 确保最多只能有一条待处理订单
        const newOrder = {
          hairstylistName: "王师傅",
          hairstylistPhone: "123456789",
        };
        pendingOrders.value.push(newOrder);
      }
    };

    // 取消订单
    const cancelOrder = () => {
      pendingOrders.value.pop();
    };

    // 完成订单
    const completeOrder = () => {
      const completedOrder = pendingOrders.value.pop();
      completedOrder.status = '正在处理';
      completedOrder.date = '2024-11-20'; // 获取当前日期
      completedOrders.value.push(completedOrder);
    };

    return {
      pendingOrders,
      completedOrders,
      columns,
      completedColumns,
      createOrder,
      cancelOrder,
      completeOrder,
    };
  },
};
</script>

<style scoped>
.main-header {
  background: linear-gradient(to right, rgba(149,188,107,0.56),  rgba(127,170,41,0.56)); /* 渐变背景 */
  color: black;
  font-weight: bold;
  text-align: center;
  padding: 30px 20px; /* 增加上下内边距 */
  font-size: 26px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  display: flex;
  align-items: center;
  justify-content: center;
}


.order-table {
  background-image: url('/images/背景.jpg');
  margin: 20px auto;
  width: 80%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加表格阴影 */
}

.table-title {
  font-size: 25px;
  font-weight: bold;
}

.status {
  text-align: right;
  font-size: 25px;
  color: #e74c3c;
}

.order-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.footer-bar {
  background-color: #f0f0f5;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 25px;
  color: #99BB99;
}

footer a {
  color: #99BB99;
  font-size: 25px;
  text-decoration: none;
  padding: 10px;
}

footer a:hover {
  color: #99BB99;
}

.ant-table-thead > tr > th {
  background-color: #99BB99;
  color: white;
}

.ant-table-tbody > tr > td {
  font-size: 25px;
  padding: 16px;
}

.ant-table-tbody tr:hover {
  background-color: #f5f5f5;
}

</style>